<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜索功能调试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background: #1a1a1a;
            color: #fff;
        }
        .section {
            background: #2a2a2a;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .success {
            background: #2d5016;
            border-left: 4px solid #4caf50;
        }
        .error {
            background: #5d1a1a;
            border-left: 4px solid #f44336;
        }
        .warning {
            background: #5d4a1a;
            border-left: 4px solid #ff9800;
        }
        button {
            background: #4caf50;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #45a049;
        }
        code {
            background: #1a1a1a;
            padding: 2px 6px;
            border-radius: 3px;
            color: #4caf50;
        }
        pre {
            background: #1a1a1a;
            padding: 10px;
            border-radius: 4px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>🔍 搜索功能调试页面</h1>
    
    <div class="section">
        <h2>修复状态检查</h2>
        <div id="fix-status"></div>
        <button onclick="checkFixes()">检查修复状态</button>
        <button onclick="location.reload()">刷新页面</button>
    </div>
    
    <div class="section">
        <h2>材质搜索测试</h2>
        <div id="material-search-status"></div>
        <button onclick="testMaterialSearch()">测试材质搜索</button>
    </div>
    
    <div class="section">
        <h2>Mesh搜索测试</h2>
        <div id="mesh-search-status"></div>
        <button onclick="testMeshSearch()">测试Mesh搜索</button>
    </div>
    
    <div class="section">
        <h2>浏览器缓存清除说明</h2>
        <div class="warning">
            <h3>⚠️ 重要：清除浏览器缓存</h3>
            <p>如果修复后搜索功能仍然无效，请执行以下操作：</p>
            <ul>
                <li><strong>Windows/Linux:</strong> 按 <code>Ctrl + Shift + R</code> 或 <code>Ctrl + F5</code></li>
                <li><strong>Mac:</strong> 按 <code>Cmd + Shift + R</code></li>
                <li><strong>手动清除：</strong> 打开开发者工具 (F12) → Network 标签 → 勾选 "Disable cache"</li>
            </ul>
        </div>
    </div>
    
    <div class="section">
        <h2>控制台日志</h2>
        <div id="console-log" style="max-height: 300px; overflow-y: auto;"></div>
    </div>

    <script>
        // 拦截console.log
        const originalLog = console.log;
        const logContainer = document.getElementById('console-log');
        
        console.log = function(...args) {
            originalLog.apply(console, args);
            const msg = args.map(arg => 
                typeof arg === 'object' ? JSON.stringify(arg, null, 2) : String(arg)
            ).join(' ');
            const logEntry = document.createElement('div');
            logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
            logEntry.style.cssText = 'padding: 5px; border-bottom: 1px solid #333; font-family: monospace; font-size: 12px;';
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
        };

        function checkFixes() {
            const statusDiv = document.getElementById('fix-status');
            let html = '<h3>检查结果：</h3>';
            
            // 检查 SceneTreeUI 修复
            const sceneTreeUICheck = checkSceneTreeUIFix();
            html += sceneTreeUICheck.html;
            
            // 检查 MaterialEditorPanel 修复
            const materialPanelCheck = checkMaterialPanelFix();
            html += materialPanelCheck.html;
            
            // 检查 MaterialEditor 修复
            const materialEditorCheck = checkMaterialEditorFix();
            html += materialEditorCheck.html;
            
            statusDiv.innerHTML = html;
        }
        
        function checkSceneTreeUIFix() {
            try {
                // 检查 SceneTreeUI 是否存在
                if (typeof window.sceneTreeUI !== 'undefined') {
                    return {
                        success: true,
                        html: '<div class="status success">✅ SceneTreeUI 已加载</div>'
                    };
                } else {
                    return {
                        success: false,
                        html: '<div class="status warning">⚠️ SceneTreeUI 未加载（可能需要先打开编辑器）</div>'
                    };
                }
            } catch (e) {
                return {
                    success: false,
                    html: `<div class="status error">❌ 检查 SceneTreeUI 失败: ${e.message}</div>`
                };
            }
        }
        
        function checkMaterialPanelFix() {
            try {
                // 检查 MaterialEditorPanel 是否存在
                if (typeof window.materialEditorPanel !== 'undefined') {
                    const hasValidMaterials = Array.isArray(window.materialEditorPanel.materials);
                    const materialsCount = hasValidMaterials ? window.materialEditorPanel.materials.length : 0;
                    
                    return {
                        success: true,
                        html: `<div class="status success">✅ MaterialEditorPanel 已加载<br>材质数量: ${materialsCount}</div>`
                    };
                } else {
                    return {
                        success: false,
                        html: '<div class="status warning">⚠️ MaterialEditorPanel 未加载（可能需要先打开编辑器）</div>'
                    };
                }
            } catch (e) {
                return {
                    success: false,
                    html: `<div class="status error">❌ 检查 MaterialEditorPanel 失败: ${e.message}</div>`
                };
            }
        }
        
        function checkMaterialEditorFix() {
            try {
                // 检查旧的 MaterialEditor 是否被禁用
                if (typeof window.getMaterialEditor === 'function') {
                    return {
                        success: true,
                        html: '<div class="status success">✅ MaterialEditor 存在（已禁用面板渲染）</div>'
                    };
                } else {
                    return {
                        success: true,
                        html: '<div class="status success">✅ MaterialEditor 未加载</div>'
                    };
                }
            } catch (e) {
                return {
                    success: false,
                    html: `<div class="status error">❌ 检查 MaterialEditor 失败: ${e.message}</div>`
                };
            }
        }
        
        function testMaterialSearch() {
            const statusDiv = document.getElementById('material-search-status');
            
            console.log('🧪 开始测试材质搜索...');
            
            if (!window.materialEditorPanel) {
                statusDiv.innerHTML = '<div class="status error">❌ MaterialEditorPanel 未加载。请先打开编辑器页面并打开材质编辑器面板。</div>';
                return;
            }
            
            // 检查搜索输入框
            const searchInput = document.getElementById('material-search-input');
            if (!searchInput) {
                statusDiv.innerHTML = '<div class="status error">❌ 找不到材质搜索输入框。材质编辑器可能未正确初始化。</div>';
                return;
            }
            
            // 测试搜索功能
            try {
                const testKeyword = 'test';
                console.log(`测试搜索关键词: "${testKeyword}"`);
                window.materialEditorPanel.renderMaterialList(testKeyword);
                
                statusDiv.innerHTML = '<div class="status success">✅ 材质搜索测试通过！请在控制台查看详细信息。</div>';
            } catch (e) {
                statusDiv.innerHTML = `<div class="status error">❌ 材质搜索测试失败: ${e.message}</div>`;
                console.error('材质搜索错误:', e);
            }
        }
        
        function testMeshSearch() {
            const statusDiv = document.getElementById('mesh-search-status');
            
            console.log('🧪 开始测试Mesh搜索...');
            
            if (!window.sceneTreeUI) {
                statusDiv.innerHTML = '<div class="status error">❌ SceneTreeUI 未加载。请先打开编辑器页面。</div>';
                return;
            }
            
            // 检查mesh搜索输入框
            const meshSearchInput = document.getElementById('mesh-search-input');
            if (!meshSearchInput) {
                statusDiv.innerHTML = '<div class="status warning">⚠️ Mesh搜索输入框未找到。请先进入Mesh编辑模式。</div>';
                return;
            }
            
            // 测试搜索功能
            try {
                const testKeyword = 'mesh';
                console.log(`测试Mesh搜索关键词: "${testKeyword}"`);
                window.sceneTreeUI.handleMeshSearch(testKeyword);
                
                statusDiv.innerHTML = '<div class="status success">✅ Mesh搜索测试通过！请在控制台查看详细信息。</div>';
            } catch (e) {
                statusDiv.innerHTML = `<div class="status error">❌ Mesh搜索测试失败: ${e.message}</div>`;
                console.error('Mesh搜索错误:', e);
            }
        }
        
        // 页面加载时自动检查
        window.addEventListener('load', () => {
            console.log('🚀 调试页面已加载');
            setTimeout(checkFixes, 1000);
        });
    </script>
</body>
</html>

